<template>
	<div>
		<table cellpadding='0' cellspacing="0">
			<thead>
				<tr>
					<th v-for="(item, index) in headers" :key="index">
						{{ item }}
					</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in list" :key="index">
					<td>{{ item.name }}</td>
					<td><img :src="item.img">
					</td>
					<td>{{ item.price }}</td>
					<td><button>-</button><button>+</button></td>
					<td>{{ item.count }}</td>
					<td>删除</td>
				</tr>
			</tbody>
		</table>
		总计{{total}}
	</div>
</template>

<script setup>
import { computed, ref,reactive } from 'vue'
let goods = [
	{
		name: '小米手机',
		img: 'https://img.alicdn.com/bao/uploaded/i3/2024314280/O1CN01xvm4Vd1hUHmuR3nvv_!!2024314280.jpg',
		count: 1,
		price: 100
	},
	{
		name: '华为手机',
		img: 'https://img.alicdn.com/bao/uploaded/i4/2215302589/O1CN01OkpR4U1Uzo2EC9mw9_!!0-item_pic.jpg',
		count: 1,
		price: 200
	},
	{
		name: '苹果手机',
		img: 'https://img.alicdn.com/bao/uploaded/i3/713805254/O1CN01JOIWVL1ogNYryq8TV_!!713805254.jpg',
		count: 1,
		price: 300
	},
	{
		name: '三星手机',
		img: 'https://img.alicdn.com/bao/uploaded/i4/1902393607/O1CN01EgdLlC1cW3ExhZpHD_!!1902393607.jpg',
		count: 1,
		price: 400
	}
]
let list = reactive(goods)
// 表格的表头数组
let headers = ['名称', '图片', '单价', '数量', '小计', '操作']
let total = computed(() => {
	let sum = 0
	list.forEach(item => {
		sum += item.price* item.count
	});
	return sum
})
setTimeout(() => {
	list[0].count=2
}, 3000);
</script>

<style  scoped>

table {
	width: 500px;
}

th,
td {
	border: 1px solid #ccc;
	border-collapse: collapse;
}

img {
	width: 40px;
	height: 50px;
}

input {
	width: 20px;
}

tr td:nth-child(5) {
	color: red;
}
</style>